<template>
  <div>
    <el-card class="box-card">
      <div class="skuCount">
        <div class="title"><i class="el-icon-s-promotion"></i>按月统计设计师需求个数</div>

        <div class="select">
          <el-select
            v-model="month"
            placeholder="请选择时间"
            size="small"
            filterable
            clearable
            @change="changeCreateTimeList"

          >
            <el-option
              v-for="(createTime,index) in createTimeList"
              :key="index"
              :label="createTime"
              :value="createTime"
            ></el-option>
          </el-select>

        </div>


        <div class="totalDesigner">
          <ve-histogram
            :data="chartData"
            :settings="chartSettings"
            :height="height"
            :width="width"
            :extend="extend"
            :events="chartEvents"
          ></ve-histogram>
        </div>

      </div>
    </el-card>


    <!--弹窗-->

    <div>
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="1000px">

        <el-table
          ref="table"
          :data="visionDemandList"

        >
          <el-table-column prop="visionDemandName" label="需求" width="210">
            <template slot-scope="scope">
              <router-link
                :to="{name:'visualDesignDetails', query: scope.row}"
                class="visionDemandName"
              >{{scope.row.visionDemandName}}</router-link>
            </template>
          </el-table-column>

          <el-table-column prop="visionDemandType" label="需求类型" width="100">
            <template slot-scope="scope">
              {{VisionDemandTypeList.find(item => item.key === scope.row.visionDemandType).value}}
            </template>
          </el-table-column>

          <el-table-column prop="createTime"  label="提出时间" width="150">
            <template slot-scope="scope">{{scope.row.createTime | formatDateHMS}}</template>
          </el-table-column>

          <el-table-column prop="demandUser" label="指派负责人" min-width="50"></el-table-column>

          <el-table-column prop="endTime" label="任务开始完成时间" width="180">
            <template slot-scope="scope">
          {{scope.row.startTime | formatDate }} - {{scope.row.endTime | formatDate}}
            </template>
          </el-table-column>

          <el-table-column prop="statusName" label="状态" width="160"></el-table-column>

        </el-table>
      </el-dialog>
    </div>


  </div>
</template>
<script>
  const ERR_OK = 200;
  import {
    getCreateTimeList,
    designerDemandScheduleSumByMonth,
    visionDemandListByUserNameAndMonth,
  } from "@/api/visualDesign";
  import veHistogram from "v-charts/lib/histogram.common";
  import { formatDate } from "@/assets/js/date";
  import amap from "v-charts/lib/amap.common";
  export default {
    components: {
      veHistogram,
    },
    props: {
      width: {
        type: String,
        default: "100%",
      },
      height: {
        type: String,
        default: "350px",
      },
    },
    data() {

      var than = this;
      this.chartEvents = {
        click: function (e) {

          console.log("this.chartEvents  事件监听 ",than.month)
          console.log(e)

          //给弹窗命名
          than.dialogTitle = e.name + " - " + e.seriesName + " - 任务"

          //请求参数
          var params =
            {
              "month" : than.month,
            "userName" : e.name,
            "size" : e.value,
            "status" : e.seriesName,

          }

          console.log(params)

          //请求后台查询 需求
          than.getVisionDemandListByUserNameAndMonth(params)

          //弹窗展示数据
          than.dialogFormVisible = true
        }
      }
      return {
        extend: {
          series: {
            barMaxWidth: 30,
            label: {
              show: true,
              position: "top",
            },
          },
        },
        chartSettings: {
          scale: true,

          stack: {
            //   产品销售额度: [
            //     "new_create",
            //     "modify",
            //     "documentation",
            //     "video",
            //     "other",
            //   ],
          },
          labelMap: {
            designerName: "设计师",
            pending: "待领取",
            toStart: "待开始",
            processing: "进行中",
            completed: "已完成",
            overdue: "已逾期",
          },
        },
        chartData: {
          columns: [
            "designerName",
            "pending",
            "toStart",
            "processing",
            "completed",
            "overdue",
          ],
          rows: [],
        },

        createTimeList: [],
        month: "",
        visionDemandList: [],
        dialogFormVisible: false,
        loading: true,
        VisionDemandTypeList: [],
        dialogTitle: ""

      };
    },
    created() {
      this.getCreateTimeList()
      this.getVisionDemandTypeList();
      this.getData();

    },
    filters: {
      formatDateHMS(time) {
        if (time) {
          var date = new Date(time);
          return formatDate(date, "yyyy-MM-dd hh:mm:ss");
        }
      },

      formatDate(time) {
        if (time) {
          var date = new Date(time);
          return formatDate(date, "yyyy-MM-dd");
        }
      },
    },
    methods: {
      getData() {
        designerDemandScheduleSumByMonth({ "month" : this.month}).then((res) => {
          if (res.data.code === ERR_OK) {
          this.chartData.rows = res.data.data;
          }
        });
      },
      getCreateTimeList(){
        getCreateTimeList().then((res) => {
          if (res.data.code === ERR_OK) {
            this.createTimeList = res.data.data;
            var obj = this.createTimeList.slice(-1);

            this.month = obj.toString();
            console.log(" createTimeList ===== this.month = " +  this.month)
          }
        });

      },

      changeCreateTimeList(){
       this.getData(this.month)
      },

      getVisionDemandListByUserNameAndMonth(params){
        this.loading = true;
        visionDemandListByUserNameAndMonth(params).then((res) => {
          this.loading = false;
          if (res.data.code === ERR_OK) {
            console.log("res.data")
            console.log(res.data)
            this.visionDemandList = res.data.data;
          }else{
            this.$message.success(res.data.msg);
          }
        });
      },
      //获取视觉需求类型列表
      getVisionDemandTypeList() {
        this.$ajax
          .get(
            this.GLOBAL.oaVisionDemand +
            "/visionDemandBasicInfo/getVisionDemandTypeList"
          )
          .then(res => {
            if (res.data.code === ERR_OK) {
              this.VisionDemandTypeList = res.data.data;
            }
          });
      },

    },
  };
</script>
<style lang="scss" scoped>


  .skuCount {
    position: relative;
    margin-top: 5px;
    padding: 20px;

  .title{
    position: absolute;
    top: 5px;
    font-size: 14px;
  i{
    color: #409eff;
  }
  }
  .select{
    position: relative;
    margin-top: 10px;
    padding: 10px;
  }
  }
</style>
